<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				border: 3px solid #FF0000;
				/* transition: all 0.5s; */
			}
		</style>
	</head>
	<body>
		<button type="button" id="btn1">放大</button>
		<button type="button" id="btn2">缩小</button>
		<button type="button" id="toghle">隐藏/显示</button>
		<div id="box1"></div>
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			$(function(){
				$("#btn1").click(function(){
					$("#box1").css({
					"width":"200px",
					"height":"200px"
					})
				});	
				$("#btn2").click(function(){
					$("#box1").css({
					"width":"100px",
					"height":"100px"
					})
				});
				$("#toghle").click(function(){
					$("#box1").stop().toggle(1000);
				});
				$("#box1").hover(function(){
					$(this).css({
						"height":"+=100px"
					})
				},function(){
					$(this).css({
						"height":"-=100px"
					})
				});
			});
		</script>
	</body>
</html>
